<template>
    <div>
        <van-popup 
                v-model="Show"
                class="bottomPop"
                position="bottom"
                :style="{ height:'15%'}"
                @closed="Emit"
                @close='ShowPopup'>
                    <div class="downLoad item">下载APP</div>
                    <div class="item"  @click="ShowPopup">取消</div>
        </van-popup>
    </div>
</template>
<script>
/*
 * 底部弹层组件，显示下载App和取消
 * 父组件传入true时显示，点击遮罩层时隐藏，通知父组件控制值变为false
 * prop ShowPop 
 * emit ChangeShowPop
 * 父组件示例
 * <van-cell is-link @click="ShowBottomPopup">点击</van-cell>
   <BottomPop :ShowPop='ShowBottomPop' @ChangeShowPop='ShowBottomPopup'></BottomPop>
    script部分
        import BottomPop from '@/components/BottomPop.vue'
        export default{
            name:'',
            components:{
                BottomPop
            },
            data(){
                return{
                    ShowBottomPop:false
                }
            },
            methods:{
                ShowBottomPopup(){
                    this.ShowBottomPop=!this.ShowBottomPop
                }
            }
        } 
 */
export default {
    name:'BottomPop',
    props:{
        ShowPop:{
            type:Boolean,
            require:true
        }
    },
    data(){
        return {
            Show:false
        }
    },
    watch:{
        ShowPop(v){
            if(v){
                this.Show=true
            }
        }
    },
    methods:{
        ShowPopup(){
            this.Show=false    
        },
        Emit(){
            this.$emit('ChangeShowPop')
        }
    }
}
</script>
<style lang="stylus" scoped>
.bottomPop
    background-color #ccc
    text-align center
    .item
        height 50%
        background-color #fff
        font-size .32rem
        color #222
        line-height 1rem
    .downLoad
        position relative
        &:after
            content ''
            width 100%
            height .02rem
            position absolute
            background-color #ccc
            bottom 0
            left 0
</style>